<template>
  <view class="content">
    <view class="revenList flex justify-between">
      <view class="border-10 colorF" style="width: 187rpx;height: 73rpx; background-color: #363f51;"
        v-for="(item,index) in revenue" :key="index" :class="{'active':current === index}" @click="checked(index)">
        <view>
          {{item.title}}
        </view>
      </view>
    </view>
    <view class="">
      <view class="" v-if="current=== 0">
        <simCard></simCard>
      </view>
      <view class="" v-if="current=== 1">
        <basic></basic>
      </view>
      <view class="" v-if="current=== 2">
        <model></model>
      </view>
    </view>
  </view>
</template>

<script>
  import model from '@/pages/revenue/components/model.vue'
  import simCard from '@/pages/revenue/components/simCard.vue'
  import basic from '@/pages/revenue/components/basic.vue'

  export default {
    components: {
      model,
      simCard,
      basic
    },
    data() {
      return {
        revenue: [{
            index: '1',
            title: 'SIM卡管理'
          },
          {
            index: '2',
            title: '充电桩管理'
          },
          {
            index: '3',
            title: '桩型号管理'
          }
        ],
        current: 1,
        text: null
      }
    },
    methods: {
      checked(index) {
        this.current = index
        this.text = this.revenue[index].title
        // console.log('营收页面', this.current);
      },
    },
    onLoad() {

    }
  }
</script>

<style lang="scss" scoped>
  .revenList {
    padding: 10rpx 34rpx 0 37rpx;
    text-align: center;
    line-height: 72rpx;
  }

  .active {
    position: relative;
    color: #fff;
    // border-radius: 10rpx;
    background-color: #2979ff !important;
    // background-color: red !important;
  }

  .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
  }

  .text-area {
    display: flex;
    justify-content: center;
  }

  .title {
    font-size: 36rpx;
    color: #8f8f94;
  }
</style>